<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>添加设备</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/plugin/ztree/css/zTreeStyle/zTreeStyle.css}" media="all">

    <style type="text/css">
        /*修改ztree的字体大小*/
        .ztree * {
            font-size: 16px;
        }

        /*集成ztree的add button图标*/
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
</head>
<body>
<div class="searchTable">
    <div class="layui-inline">
        <input class="layui-input" name="s_deviceName" id="s_deviceName" autocomplete="off" placeholder="设备名称">
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="s_deviceSerial" id="s_deviceSerial" autocomplete="off"
               placeholder="设备序列号">
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="s_deviceCode" id="s_deviceCode" autocomplete="off" placeholder="设备验证码">
    </div>
    <div class="layui-inline">
        <!--layui-select标签必须在layui-form里面才生效。。-->
        <form class="layui-form">
            <select id="s_deviceType" class="layui-select" name="s_deviceType"></select>
            <div class="layui-unselect layui-form-select">
                <div class="layui-select-title">
                    <input type="text" placeholder="设备类型" autocomplete="off"
                           class="layui-input layui-unselect">
                    <i class="layui-edge"></i>
                </div>
            </div>
        </form>
    </div>
    <button type="button" id="searchBtn" class="layui-btn" data-type="reload">搜索</button>
    <!--添加设备-->
    <button type="button" id="addDeviceBtn" class="layui-btn layui-btn-normal" shiro:hasPermission="/device/add">添加设备</button>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左树 -->
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg3">
            <div class="layui-card" style="overflow:auto;">
                <div class="layui-card-body mini-bar">
                    <div class="zTreeDemoBackground left">
                        <ul id="deviceTree" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右表 -->
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="SysDevice" lay-filter="SysDevice"></table>
                </div>
            </div>
        </div>

    </div>
</div>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

<!--新增/编辑表单-->
<div class="layui-row" id="editForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px; margin-right: 20px">
            <!--设备主键id-->
            <input type="text" id="id" name="id" hidden="hidden">
            <!--树结构父节点id(新增的时候要用到，这里需要手动赋值)-->
            <input type="text" id="treePid" name="treePid" hidden="hidden">
            <!--凭证组树结构id(新增的时候要用到，这里需要手动赋值)-->
            <input type="text" id="voucherTreeId" name="voucherTreeId" hidden="hidden">
            <!--凭证组id(编辑的时候要用到，该值是通过分页查询获取到的)-->
            <input type="text" id="voucherId" name="voucherId" hidden="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">设备类型</label>
                <div class="layui-input-block">
                    <select id="deviceTypeSelect" name="deviceType" lay-verify="required">

                    </select>
                    <div class="layui-unselect layui-form-select">
                        <div class="layui-select-title">
                            <input type="text" placeholder="请选择" value="" readonly=""
                                   class="layui-input layui-unselect">
                            <i class="layui-edge"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设备名称</label>
                <div class="layui-input-block">
                    <input type="text" id="deviceName" name="deviceName" required lay-verify="required"
                           autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设备序列号</label>
                <div class="layui-input-block">
                    <input type="text" id="deviceSerial" name="deviceSerial" required lay-verify="required"
                           autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设备验证码</label>
                <div class="layui-input-block">
                    <input type="text" id="deviceCode" name="deviceCode" required lay-verify="required"
                           autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">厂商</label>
                <div class="layui-input-block">
                    <input type="text" id="manufacturer" name="manufacturer" required autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="confirm">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="back">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--新增节点表单-->
<div class="layui-row" id="addNodeForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px; margin-right: 20px">
            <!--被选中的节点是父Id-->
            <input type="text" id="addNodeId" name="pid" hidden="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">节点名称</label>
                <div class="layui-input-block">
                    <input type="text" id="addNodeName" name="name" required lay-verify="required"
                           autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="addNodeConfirm">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="addNodeBack">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--编辑节点表单-->
<div class="layui-row" id="editNodeForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px; margin-right: 20px">
            <!--被选中的节点是当前节点Id-->
            <input type="text" id="editNodeId" name="id" hidden="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">节点名称</label>
                <div class="layui-input-block">
                    <input type="text" id="editNodeName" name="name" required lay-verify="required"
                           autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="editNodeConfirm">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="editNodeBack">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="tbBar">
    <!--查看设备-->
    <!--    <i style="font-size: 24px; color: #4178ff;" class="layui-icon layui-icon-list " lay-event="get"-->
    <!--       shiro:hasPermission="/device/get"></i>-->
    <!--实时监控-->
    <i style="font-size: 20px; color: #f1823a;" onmouseover="show_tips(this, '实时监控', '#f1823a')" class="layui-icon layui-icon-video " lay-event="monitor"></i>
    <!--编辑设备-->
    <i style="font-size: 24px; color: #298f83;" onmouseover="show_tips(this, '编辑设备', '#298f83')" class="layui-icon layui-icon-edit " lay-event="modify"
       shiro:hasPermission="/device/modify"></i>
    <!--删除设备-->
    <i style="font-size: 24px; color: #f4577b;" onmouseover="show_tips(this, '删除设备', '#f4577b')" class="layui-icon layui-icon-delete " lay-event="remove"
       shiro:hasPermission="/device/delete"></i>
</script>

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/ztree/jquery.ztree.all.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table', 'layer', 'tree'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var tree = layui.tree;
        // 树节点点击节点信息（通过treeData.id，treeData.pid可以获取信息）
        var treeData;

        //页面一打开就执行弹层
        layer.ready(function () {
            // 查询选项：设备类型下拉框
            addOption(layui.jquery("#s_deviceType"), DataType.DeviceType, true);
            // 渲染
            layui.form.render();
        });

        // 树结构
        var $ = layui.jquery;
        var setting = {
            // 设置zTree是否开启异步加载模式
            async: {
                enable: true
            },
            //页面上的显示效果
            view: {
                addHoverDom: addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件
                removeHoverDom: removeHoverDom, //离开节点时的操作
                selectedMulti: false //不可多选
            },
            edit: {
                enable: true, //单独设置为true时，可加载修改、删除图标
                editNameSelectAll: true,
                removeTitle: '删除',
                renameTitle: '重命名',
                showRemoveBtn: showRemoveBtn, // 展示删除按钮
                showRenameBtn: showRenameBtn  // 展示编辑按钮
            },
            data: {
                simpleData: {
                    // 使用简单格式的话，无需写children，由ztree自己排序
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback: {
                beforeRemove: beforeRemove,//点击删除时触发，用来提示用户是否确定删除（可以根据返回值 true|false 确定是否可以删除）
                beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
                beforeRename: beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求(也是根据返回值 true|false 确定是否可以编辑完成)
                onRemove: onRemove,//(beforeRemove返回true之后可以进行onRemove)删除节点后触发，用户后台操作
                onRename: onRename,//编辑后触发，用于操作后台
                beforeDrag: beforeDrag, //用户禁止拖动节点
                onClick: clickNode//点击节点触发的事件
            }
        };
        var zTree = loadTree();

        // 加载树
        function loadTree() {
            return $.fn.zTree.init($("#deviceTree"), setting, getTreeData());
        }

        // 删除树节点前确认
        function beforeRemove(treeId, treeNode) {
            deleteNode(treeNode);
            return false;
        }

        // 删除树节点，调用后端接口
        function onRemove(e, treeId, treeNode) {
        }

        // 点击编辑时触发
        function beforeEditName(treeId, treeNode) {
            // 选中当前节点
            // selectedNode(treeNode.tId);
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "编辑节点",
                area: ['40%', '40%'],
                content: $("#editNodeForm")//引用的弹出层的页面层的方式加载修改界面表单
            });
            $("#editNodeId").val(treeNode.id);
            $("#editNodeName").val(treeNode.name);
        }

        // 编辑结束时触发
        function beforeRename(treeId, treeNode, newName, isCancel) {
            return true;
        }

        // 编辑后触发
        function onRename(e, treeId, treeNode, isCancel) {
            console.log("修改节点的id为：" + treeNode.id + ", 修改后的名称为：" + treeNode.name);
        }

        // 禁止拖动节点
        function beforeDrag(treeId, treeNodes) {
            return false;
        }

        // 选中节点
        function clickNode(e, treeId, treeNode) {
            console.log("选中的节点名称：" + treeNode.name + "\n节点id：" + treeNode.id);
        }

        // 当鼠标移动到节点上时，显示用户自定义控件
        function addHoverDom(treeId, treeNode) {
            // 如果当前节点类型是设备，则不展示添加节点
            if (!showAddBtn(treeId, treeNode)) {
                return;
            }
            // 加入当前节点id是1，这里treeNode.tId打印出来的是“deviceTree_1”
            var sObj = $("#" + treeNode.tId + "_span");
            // treeNode.editNameFlag: 用于记录节点是否处于编辑名称的状态
            if (treeNode.editNameFlag || $("#addBtn" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn" + treeNode.tId
                + "' title='添加子节点' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                // 选中当前节点
                selectedNode(treeNode.tId);
                //在这里向后台发送请求保存一个新建的叶子节点，父id为treeNode.id,让后将下面的100+newCount换成返回的id
                //zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建节点" + (newCount++)});
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "新增节点",
                    area: ['40%', '40%'],
                    content: $("#addNodeForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
                $("#addNodeId").val(treeNode.id);
                $("#addNodeName").val("");
            });
        }

        // 移除
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn" + treeNode.tId).unbind().remove();
        }

        // 是否展示新增（如果是设备的话，不显示）
        function showAddBtn(treeId, treeNode) {
            return treeNode.type !== 3;
        }

        // 是否展示编辑按钮（如果是设备、凭证组的话，不显示）
        function showRenameBtn(treeId, treeNode) {
            return treeNode.type !== 3 && treeNode.type !== 1;
        }

        // 是否展示删除按钮（如果是设备、凭证组的话，不显示）
        function showRemoveBtn(treeId, treeNode) {
            return treeNode.type !== 3 && treeNode.type !== 1;
        }

        // 选中当前节点
        function selectedNode(id) {
            // 选中当前节点
            var node = zTree.getNodeByParam("id", id);
            //先取消所有的选中状
            zTree.cancelSelectedNode();
            //将指定ID的节点选中
            zTree.selectNode(node, true);
        }

        // 点击添加节点的确定按钮
        form.on('submit(addNodeConfirm)', function (massage) {
            var param = {};
            param["pid"] = $("#addNodeId").val();
            var name = $("#addNodeName").val();
            if (isEmpty(name)) {
                layer.msg("节点名称不能为空！")
                return false;
            }
            param["name"] = name;
            // 节点类型是地点节点
            param["nodeType"] = 2;
            $.ajax({
                url: ctx + '/manageTree/addNode',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(param),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    console.log("success: " + data);
                    if (data.result.code == 200) {
                        // 新增返回的id
                        var nodeId = data.body;
                        if (isEmpty(nodeId)) {
                            layer.msg("新增成功，但是返回id为空，请重新刷新界面！");
                        } else {
                            // 关闭所有弹窗
                            layer.closeAll();
                            // 操作成功
                            layer.msg("操作成功", {
                                time: 1000
                            })
                            // 给zTree添加节点
                            var selectNodes = zTree.getSelectedNodes()[0];
                            console.log(selectNodes);
                            zTree.addNodes(selectNodes, {
                                id: nodeId,
                                pId: selectNodes.id,
                                name: name,
                                icon: getIconPath("icon-site")
                            });
                        }
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    console.log("fail: " + result);
                    layer.msg("请求失败！");
                }
            });
            // 返回false表示不希望页面自动刷新
            return false;
        });

        // 点击编辑节点的确定按钮
        form.on('submit(editNodeConfirm)', function (massage) {
            var param = {};
            param["id"] = $("#editNodeId").val();
            var name = $("#editNodeName").val();
            if (isEmpty(name)) {
                layer.msg("节点名称不能为空！");
                return false;
            }
            param["name"] = name;
            $.ajax({
                url: ctx + '/manageTree/editNode',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(param),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 关闭所有弹窗
                        layer.closeAll();
                        // 操作成功
                        layer.msg("操作成功", {
                            time: 1000
                        })
                        // 更新被选中节点的name
                        var selectedNodes = zTree.getSelectedNodes();
                        selectedNodes[0].name = name;
                        zTree.updateNode(selectedNodes[0]);
                        return true;
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    console.log("fail: " + result);
                    layer.msg("请求失败！");
                }
            });
            // 返回false表示不希望页面自动刷新
            return false;
        });

        /**
         * 删除节点
         *
         * @param treeNode 要删除的节点信息
         */
        function deleteNode(treeNode) {
            layer.confirm('确定删除该节点？', function (index) {
                $.ajax({
                    url: ctx + '/manageTree/deleteNode',
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json",
                    data: requestDTO(treeNode.id),
                    beforeSend: function () {
                        this.layerIndex = showLoad();
                    },
                    complete: function () {
                        closeLoad(this.layerIndex);
                    },
                    success: function (data) {
                        if (data.result.code == 200) {
                            // 关闭所有弹窗
                            layer.closeAll();
                            // 操作成功
                            layer.msg("操作成功", {
                                time: 1000
                            })
                            // 移除这个节点
                            zTree.removeNode(treeNode);
                            return true;
                        } else {
                            layer.msg(data.result.message);
                        }
                    },
                    error: function (result) {
                        layer.msg("请求失败！");
                    }
                });
                // 不让刷新
                return false;
            });
        }

        // 设备二维表格
        table.render({
            elem: '#SysDevice'
            , url: ctx + '/manageDevice/getPage'
            , method: 'post'
            , contentType: 'application/json'
            , defaultToolbar: false //去掉右上角的打印等按钮
            , title: 'SysDevice'
            , loading: true //显示加载条
            , cols: [
                [
                    {title: '序号', templet: '#xuhao', align: 'center'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'deviceName', title: '设备名称', align: 'center'},
                    {
                        field: 'deviceType', title: '设备类型', align: 'center',
                        templet: function (d) {
                            return getLabel(DataType.DeviceType, d.deviceType)
                        }
                    },
                    {field: 'deviceSerial', title: '设备序列号', align: 'center'},
                    {field: 'deviceCode', title: '设备验证码', align: 'center'},
                    {
                        field: 'createTime', title: '创建时间', align: 'center',
                        templet: function (d) {
                            if (d.createTime == null) {
                                return "";
                            } else {
                                return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                            }
                        }
                    },
                    {
                        field: 'updateTime', title: '更新时间', align: 'center',
                        templet: function (d) {
                            if (d.updateTime == null) {
                                return "";
                            } else {
                                return layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss');
                            }
                        }
                    },
                    {fixed: 'right', title: '操作', toolbar: '#tbBar'}
                ]
            ]
            , page: true
            , request: {
                pageName: 'pageNum'//页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.body.totalSize, //解析数据长度
                    "data": res.body.list //解析数据列表
                };
            }

        });

        /*重载*/
        var active = {
            reload: function () {
                var queryWhere = {};
                // 设备名称
                var deviceName$_ = $('#s_deviceName');
                if (deviceName$_.val() != '') {
                    queryWhere['queryDeviceName'] = deviceName$_.val();
                }
                // 设备序列号
                var deviceSerial$_ = $('#s_deviceSerial');
                if (deviceSerial$_.val() != '') {
                    queryWhere['queryDeviceSerial'] = deviceSerial$_.val();
                }
                // 设备验证码
                var deviceCode$_ = $('#s_deviceSn');
                if (deviceCode$_.val() != '') {
                    queryWhere['queryDeviceSn'] = deviceCode$_.val();
                }
                // 设备类型
                var deviceType$_ = $("#s_deviceType");
                if (deviceType$_.val() != '') {
                    queryWhere['deviceType'] = deviceType$_.val();
                }

                //执行重载
                table.reload('SysDevice', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: queryWhere
                    , done: function (res, curr, count) {
                        this.where = {};
                    }
                }, 'data');
            }
        };

        /*搜索*/
        $('#searchBtn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /*新增、修改设备*/
        form.on('submit(confirm)', function (massage) {
            $.ajax({
                url: ctx + '/manageDevice/addModifyDevice',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(massage.field),
                beforeSend: function () {
                    this.layerIndex = showLoad();
                },
                complete: function () {
                    closeLoad(this.layerIndex);
                },
                success: function (data) {
                    if (data.result.code == 200) {
                        // 关闭所有弹窗
                        layer.closeAll();
                        // 操作成功
                        layer.msg("操作成功", {
                            time: 1000
                        });
                        // 重新加载树
                        loadTree();
                        // 重新加载表格
                        table.reload('SysDevice');
                    } else {
                        layer.msg(data.result.message);
                    }
                },
                error: function (result) {
                    layer.msg("请求失败！");
                }
            });

            return false;
        });

        // 点击添加设备按钮
        $('#addDeviceBtn').click(function () {
            // 判断是否有选择节点
            var selectNodes = zTree.getSelectedNodes();
            if (!selectNodes.length || selectNodes.length == 0) {
                layer.msg('请先选择节点！', {time: 1000, offset: 'auto'});
                return;
            } else if (selectNodes.length > 1) {
                layer.msg('只能选中一个节点！', {time: 1000, offset: 'auto'});
                return;
            } else if (selectNodes[0].type === 3) {
                layer.msg('不能在设备节点下添加摄像头！', {time: 1000, offset: 'auto'});
                return;
            }
            // 当前选中节点id
            var selectTreeId = selectNodes[0].id;
            // 凭证组的树节点id
            var voucherTreeId;
            var nodeList = selectNodes[0].getPath();
            for (var j = 0; j < nodeList.length; j++) {
                // 获取到凭证组节点
                if (nodeList[j].type == 1) {
                    voucherTreeId = nodeList[j].id;
                    break;
                }
            }
            if (voucherTreeId === undefined) {
                layer.msg('当前节点未指定凭证组父id！', {time: 1000, offset: 'auto'});
                return;
            }
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "新增",
                area: ['60%', '80%'],
                content: $("#editForm")//引用的弹出层的页面层的方式加载修改界面表单
            });
            setFormValue(null, null, voucherTreeId, selectTreeId);
        });

        //监听行工具事件
        table.on('tool(SysDevice)', function (obj) {
            var data = obj.data;
            // console.log(obj)
            if (obj.event === 'remove') {
                layer.confirm('确定删除该设备？', function (index) {
                    $.ajax({
                        type: "POST",
                        url: ctx + "/manageDevice/delete",
                        contentType: "application/json",
                        dataType: "json",
                        data: requestDTO(data.id),
                        beforeSend: function () {
                            this.layerIndex = showLoad();
                        },
                        complete: function () {
                            closeLoad(this.layerIndex);
                        },
                        success: function (response) {
                            if (response.result.code == 200) {
                                layer.msg("操作成功", {
                                    timeout: 1000
                                }, function () {
                                    // 关闭窗口
                                    layer.close(index);
                                });
                                //执行重载
                                var queryWhere = {};
                                table.reload('SysDevice', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                    , where: queryWhere
                                    , done: function (res, curr, count) {
                                        this.where = {};
                                    }
                                }, 'data');
                                // 重新加载树
                                loadTree();
                            } else {
                                layer.msg(response.result.message)
                            }
                        },
                        error: function (e) {
                            console.log("ERROR: ", e);
                        }
                    });
                });
            } else if (obj.event === 'modify') {
                //iframe层-父子操作
                var updateIndex = layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "修改",
                    area: ['60%', '80%'],
                    content: $("#editForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
                setFormValue(obj, data);
            } else if (obj.event === 'monitor') {
                // 打开新页面
                postOpenWindow(ctx + "/monitor/monitor",{"deviceId": data.id});
            }
        });

        /**
         * 填充form（添加/修改摄像头的方法）
         *
         * @param voucherId 凭证组树id(添加时使用： 指选中的节点所在的凭证组树结，修改时要做校验)
         * @param selectNodeId 选择的节点id
         */
        function setFormValue(obj, data, voucherTreeId, selectNodeId) {
            var target = $("#deviceTypeSelect");
            // 添加设备类型对应的数据字典
            addOption(target, DataType.DeviceType);

            if (data != null) {
                $("#id").val(data.id);
                $("#deviceSerial").val(data.deviceSerial);
                $("#deviceName").val(data.deviceName);
                $("#deviceCode").val(data.deviceCode);
                $("#manufacturer").val(data.manufacturer);
                // 凭证组id
                $("#voucherId").val(data.voucherId);
                // 选中设备类型
                target.val(data.deviceType);
            } else {
                $("#id").val('');
                $("#deviceSerial").val('');
                $("#deviceName").val('');
                $("#deviceCode").val('');
                $("#manufacturer").val('');
                // 凭证组树结构id
                $("#voucherTreeId").val(voucherTreeId);
                // 父节点树id
                $("#treePid").val(selectNodeId);
            }
            layui.form.render();
        }

        $("#back").on('click', function () {
            layer.closeAll();
        });
        $("#addNodeBack").on('click', function () {
            layer.closeAll();
        });
        $("#editNodeBack").on('click', function () {
            layer.closeAll();
        });

        // 获取树结构
        function getTreeData() {
            var obj = new Object();
            $.ajax({
                url: ctx + '/manageTree/selectTreeNodeByCondition',
                type: "POST",
                async: false, // 同步
                contentType: "application/json",
                dataType: "json",
                data: requestDTO(),
                success: function (data) {
                    if (data.result.code == 200) {
                        // 关闭所有弹窗
                        obj = data.body;
                        // 遍历，更改icon以及是否展开
                        obj.forEach(function (item) {
                            item.icon = getIconPath(item.icon);
                            item.open = expandFlag(item.level);
                        })
                    }
                }
            });
            return obj;
        }

    });
</script>

</body>
</html>